<!-- <template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="head-container">
          <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px"></el-input>
          <el-tree highlight-current class="flow-tree" :data="deptOptions" :props="defaultProps"
            :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" default-expand-all
            @node-click="handleNodeClick">
            <span slot-scope="{ node, data }">
              <i class="el-icon-folder-opened" style="font-size:1rem"></i>
              <span style="padding-left:4px;font-size:14px">{{ data.label }}</span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <el-tabs type="border-card">
          <el-tab-pane label="服务器管理">
            <server ref="deptId1"></server>
          </el-tab-pane>
          <el-tab-pane label="数据库管理">
            <database ref="deptId2"></database>
          </el-tab-pane>
          <el-tab-pane label="网站管理">
            <password ref="deptId3"></password>
          </el-tab-pane>
        </el-tabs>

      </el-col>
    </el-row>
    </div>
</template>
<script>
import {deptTreeSelect } from "@/api/system/user";
import database from "./html/database";
import server from "./html/server";
import password from "./html/password";

  export default {
    components: {database,server,password},
    data() {
      return {
        // 部门名称
        deptName: undefined,
        // 部门树选项
        deptOptions: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        // 查询参数
        queryParams: {
          deptName: undefined,
          status: undefined
        },
      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      },
    },
    created() {
      this.getDeptTree();
    },
    methods: {
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.$refs.deptId1.setDept(data.id)
        this.$refs.deptId2.setDept(data.id)
        this.$refs.deptId3.setDept(data.id)
      },
      /** 查询部门下拉树结构 */
      getDeptTree() {
        deptTreeSelect().then(response => {
          this.deptOptions = response.data;
        });
      },
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
.content {
  	overflow: hidden;
  }

.tree-container {
  	height: 300px;
  	overflow-y: scroll;
  	border: 1px solid #ebeef5;
  	padding: 10px;
  }

.el-tree {
  	width: 100%;
  	height: calc(100vh - 169px);
  	overflow-y: scroll;
  }

.el-tree::-webkit-scrollbar {
  	width: 8px; // 横向滚动条
  	height: 8px; // 纵向滚动条 必写
  }

.el-tree::-webkit-scrollbar-thumb {
  	background-color: #d9d8d6;
  	border-radius: 3px;
  }

.el-tree>.el-tree-node {
  	display: inline-block;
  	min-width: 100%;
  }
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  	background-color: #9abfe8;
  }
</style> -->
